
<template>
  <el-button type="primary" @click="addUser">添加用户</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table
      :data="userList"
      style="width: 100%"
      @selection-change="handleSelectionChange"><!--当选择项发生变化时会触发该事件-->
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column property="loginAct" label="账号"  />
    <!--字段名称 对应列内容的字段名， 也可以使用 property属性-->
    <!--show-over-tooltip:当内容过长被隐藏时显示 tooltip	-->
    <el-table-column property="name" label="姓名" show-overflow-tooltip />
    <el-table-column property="phone" label="手机" show-overflow-tooltip/>
    <el-table-column property="email" label="邮箱" show-overflow-tooltip/>
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip/>
    <el-table-column label="操作" width="230px">
      <template #default="scope" >
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger"  @click="del(scope.row.id)"> 删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>
  <!--新增用户的对话框弹窗-->
  <el-dialog v-model="userDialogVisible" :title="userQuery.id>0 ?'编辑用户':'新增用户'" width="55%" center draggable>
    <el-form  ref="userRefForm" :model="userQuery" label-width="auto" style="max-width: 600px" :rules="userRules">
      <el-form-item label="账号" prop="loginAct">
        <el-input v-model="userQuery.loginAct" />
      </el-form-item>
      <el-form-item label="密码" prop="loginPwd" v-if="userQuery.id>0"><!--编辑-->
        <el-input type="password" v-model="userQuery.loginPwd" />
      </el-form-item>
      <el-form-item label="密码" prop="loginPwd" v-else ><!--新增-->
        <el-input type="password" v-model="userQuery.loginPwd" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input  v-model="userQuery.name" />
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input  v-model="userQuery.phone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input  v-model="userQuery.email" />
      </el-form-item>
     <el-form-item label="账号未过期" prop="accountNoExpired">
       <el-select v-model="userQuery.accountNoExpired" placeholder="请选择" style="width: 100%">
         <el-option
             v-for="item in options"
             :key=  "item.value"
             :label="item.label"
             :value="item.value"/>
       </el-select>
     </el-form-item>
      <el-form-item label="密码未过期" prop="credentialsNoExpired">
        <el-select v-model="userQuery.credentialsNoExpired" placeholder="请选择" style="width: 100%">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="账号未锁定" prop="accountNoLocked">
        <el-select v-model="userQuery.accountNoLocked" placeholder="请选择" style="width: 100%">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="账号是否启用" prop="accountEnabled">
        <el-select v-model="userQuery.accountEnabled" placeholder="请选择" style="width: 100%">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="userDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="userSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import { messageConfirm, messageTip} from "../util/Util.js";

export default {
  name: "UserView",
  //注入父级页面提供provide的所有属性（函数，属性，对象）
  data(){
    return{
      //用户列表数据
      userList : [{}],
      pageSize : 0,
      total : 0,
      //用户的弹窗是否弹出来，true就弹出来，false就不弹出来
      userDialogVisible :false,
      //定义用户表单对象, 初始值是空
      userQuery:{},
      //定义用户验证规则-数组对象
      userRules:{
          loginAct:[{ required: true, message: '请输入登录账号', trigger: 'blur' }],
          loginPwd:[{required: true, message: '请输入登录密码',trigger: 'blur'},
            {min: 6,max: 16,message: '密码长度应该在6-16位',trigger: 'blur'}],
          name:[{required:true,message:'请输入姓名',trigger:'blur'},
            {pattern:/^[\u4E00-\u9FA5]{1,5}$/,message:'姓名必须是中文',trigger: 'blur'}],
          phone:[{pattern:/^1[3-9]\d{9}$/,message:'手机号码格式有误',trigger:'blur'}],
          email:[{
            pattern:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message:'邮箱格式有误',
            trigger:'blur'
          }],
          accountNoExpired:[{required:true,message:'请选择账号是否未过期',trigger:'blur'}],
          credentialsNoExpired:[{required:true,message:'请选择密码是否未过期',trigger:'blur'}],
          accountNoLocked:[{required:true,message:'请选择账号是否未锁住',trigger:'blur'}],
          accountEnabled:[{required:true,message:'请选择账号是否启用',trigger:'blur'}]
      },
      //下拉选项
      options : [
        {label : '是', value : 1},
        {label : '否', value : 0}
      ],
      //用户id的数组
      userIdArray:[]
    }
  },

  mounted() {
    this.getData(1);
  },

  methods:{
    //勾选或者取消勾选时，触发该函数
    handleSelectionChange(selectionDataArray){
      console.log(selectionDataArray);
      selectionDataArray.forEach(data=>{
        let userId=data.id;
        this.userIdArray.push(userId);
      })
    },
    //查询用户列表数据方法
    getData(current){
      doGet("/api/users",{
        current : current//当前查询第几页
      }).then(resp=>{
        console.log(resp)
        if(resp.data.code===200){
          this.userList=resp.data.data.list;
          this.pageSize=resp.data.data.pageSize;
          this.total=resp.data.data.total;
        }
      })
    },
    //分页函数(current这个形参是element-plus组件自动传过来的，就是传的当前页)
    toPage(current){
      this.getData(current)
    },
    //对应详情按钮
    view(id){
      console.log(id);
      /**$route和$router的区别
       * $route：获取当前路由对象的属性信息。如 this.$route.path-拿到路由路径
       * $router:调用当前路由对象的方法 如this.$router.push("/dashboard/user")
       */
      this.$router.push("/dashboard/user/"+id);
    },
    //点击新增用户按钮时，触发该函数
    addUser(){
      this.userQuery={};
      this.userDialogVisible=true;//弹出对话框
    },
    //新增用户，提交保存
    userSubmit(){
      let formData=new FormData();
      //把新增的每个字段数据追加到formData里面
      for(let field in this.userQuery){
        formData.append(field,this.userQuery[field]);//字段名和字段值K-V
      }
      this.$refs.userRefForm.validate((isValid)=>{
        if(isValid){
          if(this.userQuery.id>0){//编辑
            doPut("/api/user",formData).then(resp=>{
              if(resp.data.code===200){
                messageTip("编辑成功","success");
                this.userDialogVisible=false;
              }else{
                messageTip("编辑失败","error");
                this.userDialogVisible=false;
              }
            })
          }else {//新增
            doPost("/api/user",formData).then(resp=>{
              if(resp.data.code===200){
                messageTip("新增成功","success");
                this.userDialogVisible=false;
              }else{
                messageTip("新增失败","error");
                this.userDialogVisible=false;
              }
            })
          }
        }
      })
    },
    //编辑用户
    edit(id){
      this.userDialogVisible=true;
      this.loadUser(id);
    },
    //加载用户信息
    loadUser(id) {
      doGet("/api/user/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.userQuery = resp.data.data;
          this.userQuery.loginPwd = "";
        }
      })
    },
    //删除单个用户
    //删除
    del (id) {
      messageConfirm("您确定要删除该数据吗？").then(() => { //用户点击“确定”按钮就会触发then函数
        doDelete("/api/user/" + id, {}).then(resp => {
          console.log(resp);
          if (resp.data.code === 200) {
            messageTip("删除成功", "success");
            //页面刷新
            this.$router.go(0);
          } else {
            messageTip("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => { //用户点击“取消”按钮就会触发catch函数
        messageTip("取消删除", "error");
      })
    },
    //join 方法的作用是将数组中的所有元素转换为一个字符串，
    // 并用指定的分隔符（这里是逗号 ,）将这些元素连接起来。
    //批量删除
    batchDel() {
      if (this.userIdArray.length <= 0) {
        //提示一下
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      messageConfirm("您确定要删除这些数据吗？").then(() => { //用户点击“确定”按钮就会触发then函数
        //原来是数组：[1,3,5,6,7,11,15]  --> ids = "1,3,5,6,7,11,15";
        let ids = this.userIdArray.join(",");
        doDelete("/api/user", {
          ids : ids
        }).then(resp => {
          console.log(resp);
          if (resp.data.code === 200) {
            messageTip("批量删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("批量删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => { //用户点击“取消”按钮就会触发catch函数
        messageTip("取消批量删除", "warning");
      })
    }
  }
}

</script>

<style scoped>
.el-table {
  margin-top: 12px;
}

.el-pagination {
  margin-top: 12px;
}
</style>

